<template>
  <div class="goods-wrapper" v-if="goods">
    <!-- 商品轮播图 -->
    <div class="goods-banner">
      <van-swipe :show-indicators="false" @change="onChange">
        <van-swipe-item v-for="(item,index) in goodsBanner">
          <img :src="item.url" alt="">
        </van-swipe-item>
      </van-swipe>
      <div class="banner-index" style="color: #9c9c9c;" v-if="goodsBanner">
        <span>{{bannerIndex}}</span> /
        <span>{{goodsBanner.length}}</span>
      </div>
    </div>
    <!-- 商品信息 -->
    <div class="goods-info" v-if="goods&&goodsInfo">
      <div class="goods-price">
        <div class="price">
          <span>￥{{goods.min_on_sale_group_price/100}}</span>
          <i>起</i>
          <span class="old-price">￥{{goods.market_price/100}}</span>
        </div>
        <span class="info">{{goodsInfo.side_sales_tip }}
        </span>
      </div>
      <div class="goods-name">
        <span>{{goods.goods_name}}</span>
      </div>
      <div class="service-promise van-hairline--top">
        <span class="service-item" v-for="item in goodsInfo.service_promise ">
          <span>{{item.type}}</span>
        </span>
        <van-icon name="arrow" />
      </div>
    </div>
    <!-- 店铺信息 -->
    <div class="goods-mall-wrapper">
      <!-- 店铺头部 -->
      <div class="goods-mall" v-if="mallInfo" @click="toMall(mallInfo.mall_id)">
        <img :src="mallInfo.logo">
        <div class="mall-info">
          <p class="name">{{mallInfo.mall_name}}</p>
          <p class="info">
            <span>{{mallInfo.goods_num_desc}}</span>
            <span>{{mallInfo.sales_tip}}</span>
          </p>
        </div>
        <div class="btn">
          <van-button size="small" type="default">进店逛逛</van-button>
        </div>
      </div>
      <!-- 店铺推荐商品 -->
      <ul class="mall-rec-list">
        <li class="goods-item" v-for="item in mallRecList">
          <img :src="item.thumb_url" alt="">
          <span class="name">{{item.goods_name}}</span>
          <div class="detail">
            <span class="price">￥{{item.price/100}}</span>
            <span class="info">{{item.sales_tip}}</span>
          </div>
        </li>
      </ul>
    </div>
    <!-- 商品详情 -->
    <div class="goods-detail">
      <div class="title">商品详情</div>
      <div class="goods-details-attr">
        <ul>
          <li class="attr-item" v-for="item in goods.goods_property">
            <span class="attr-key">{{item.key}}</span>
            <span class="attr-value">{{item.values[0]}}</span>
          </li>
        </ul>
      </div>
      <div class="goods-detail-desc">
        {{goods.goods_desc}}
      </div>
      <!-- 商品详情图 -->
      <div>
        <li v-for="item in goodsImage">
          <img :src="item.url" style="width:100%">
        </li>
      </div>
    </div>
    <!-- 相似商品 -->
    <div>
      <choiceness-goods :goodsList="mallList"></choiceness-goods>
    </div>

    <!-- 底部按钮 -->
    <van-goods-action style="  z-index: 2;">
      <van-goods-action-mini-btn icon="idcard" text="更多" @click="showMore" />
      <van-goods-action-mini-btn icon="like-o" text="收藏" />
      <van-goods-action-mini-btn icon="chat" text="客服" />
      <div class="normal-btn" @click="showSku(1)">
        <span>￥{{goods.min_normal_price/100}}</span>
        <span>加入购物车</span>
      </div>
      <div class="group-btn" @click="showSku(2)">
        <span>￥{{goods.min_group_price/100}}</span>
        <span>发起拼单</span>
      </div>
    </van-goods-action>

    <!-- 展示更多 历史浏览 回到首页 帮助 -->
    <div class="showMore-wrapper" v-show="showMoreFlag" @click="showMore">
      <div class="showMore">
        <div class="more-item history" @click="toLink('/footprint')">
          <van-icon style="font-size: .22rem; color: #d2d2d2; margin:0 0.08rem;" name="browsing-history" />
          <span>历史浏览</span>
        </div>
        <div class="more-item home" @click="toLink('/home')">
          <van-icon style="font-size: .22rem; color: #d2d2d2; margin:0 0.08rem;" name="shop-collect" />
          <span>回到首页</span>
        </div>
        <div class="more-item help" @click="toLink('/help')">
          <i style="font-size: .22rem; color: #d2d2d2; margin:0 0.08rem;" class="iconfont icon-qunfengwenhao"></i>
          <span>帮助</span>
        </div>
      </div>
    </div>

    <!-- 购买商品弹出规格列表 -->
    <van-sku v-model="showBase" :sku="sku" :goods="skugoods" :goods-id="goodsId" :hide-stock="sku.hide_stock" :show-add-cart-btn="sku.show_add_cart" :close-on-click-overlay="true" @buy-clicked="onBuyClicked" @add-cart="onAddCartClicked" />
  </div>
</template>

<script>
import axios from "axios";
import choicenessGoods from "../../components/choicenessGoods/choiceness";
import {
  goodsInfo,
  goodsService,
  mallList,
  mallInfo
} from "../../api/getDatas";
export default {
  components: {
    choicenessGoods
  },
  data() {
    return {
      showMoreFlag: false,
      // 轮播图索引
      bannerIndex: 1,
      // 商品数据
      goods: null,
      goodsInfo: null,
      // 相似商品
      mallList: null,
      // 店铺推荐商品
      mallRecList: null,
      showBase: false,
      // 商品Id
      goodsId: "",
      // 店铺Id
      mallId: null,
      // 店铺详细信息
      mallInfo: null,
      sku: {
        // 规格列表,比如颜色,尺码等
        tree: [],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [],
        price: "", // 默认价格（单位元）
        stock_num: null, // 商品总库存
        collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
        none_sku: false, // 是否无规格商品
        hide_stock: false, // 是否隐藏剩余库存
        show_add_cart: false
      },

      skugoods: {
        // 商品标题
        title: "",
        // 默认商品 sku 缩略图
        picture: ""
      }
    };
  },
  computed: {
    // 商品轮播图
    goodsBanner() {
      let images = [];
      if (!this.goods.gallery) {
        return;
      }
      this.goods.gallery.forEach(el => {
        if (el.type === 1) {
          images.push(el);
        }
      });
      return images;
    },
    // 商品详情图
    goodsImage() {
      let images = [];
      if (!this.goods.gallery) {
        return;
      }
      this.goods.gallery.forEach(el => {
        if (el.type != 1) {
          images.push(el);
        }
      });
      return images.reverse();
    },
    userInfo() {
      return this.$store.state.auth.user;
    }
  },

  methods: {
    // 监听轮播图索引
    onChange(index) {
      this.bannerIndex = index + 1;
    },
    toLink(url) {
      console.log(url);
      this.$router.push({ path: url });
    },
    toMall(id) {
      this.$router.push({ path: "/mall", query: { mall_id: id } });
    },
    // 展示更多
    showMore() {
      this.showMoreFlag = !this.showMoreFlag;
    },
    // 展示规格列表
    showSku(mode) {
      this.showBase = true;
      // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
      let list = [];
      this.goods.sku.forEach(el => {
        let s = el.spec.split(",");
        let s1 = s[0] ? s[0] : 0;
        let s2 = s[1] ? s[1] : 0;
        let s3 = s[2] ? s[2] : 0;
        // 根据购买方式,正常购买或者拼单购买.判断对应价格
        let current = "";
        if (mode === 1) {
          current = el.normal_price;
        } else {
          current = el.group_price;
        }
        let item = {
          id: el.sku_id, // skuId，下单时后端需要
          price: current, // 价格（单位分）
          specs: el.specs,
          image: el.thumb_url,
          s1: s1, // 规格类目 k_s 为 s1 的对应规格值 id
          s2: s2, // 规格类目 k_s 为 s2 的对应规格值 id
          s3: s3, // 最多包含3个规格值，为0表示不存在该规格
          stock_num: el.quantity // 当前 sku 组合对应的库存
        };
        list.push(item);
      });
      this.sku.list = list;
      // 规格列表
      this.sku.tree = this.goods.specifications;
      this.sku.stock_num = this.goods.quantity;

      // 根据购买方式,正常购买或者拼单购买.判断对应价格
      if (mode === 1) {
        // 为正常购买时,显示加入购物车按钮
        this.sku.show_add_cart = true;
        this.sku.price = this.goods.min_normal_price / 100;
      } else {
        this.sku.show_add_cart = false;
        this.sku.price = this.goods.min_group_price / 100;
      }

      this.skugoods.title = this.goods.goods_name;
      this.skugoods.picture = this.goods.thumb_url;
    },

    // 点击立即购买
    onBuyClicked(goods) {
      if (this.userInfo && this.userInfo.userId) {
        this.$router.push({
          path: "/confirmOrder",
          query: {
            sku_id: goods.selectedSkuComb.id,
            goods_id: goods.goodsId,
            goods_number: goods.selectedNum
          }
        });
      } else {
        this.$router.push({ path: "/auth/login" });
      }
    },

    // 点击加入购物车
    onAddCartClicked(goods) {
      //加入购物车，所需6个参数，商铺id，食品id，食品规格id，食品名字，食品价格，食品规格
      this.$store.commit("cart/ADD_CART", {
        shopid: this.mallInfo.mall_name,
        goods_id: goods.goodsId,
        sku_id: goods.selectedSkuComb.id,
        name: this.skugoods.title,
        num: goods.selectedNum,
        image: goods.selectedSkuComb.image,
        price: goods.selectedSkuComb.price,
        specs: goods.selectedSkuComb.specs
      });
      this.showBase = false;
      this.$toast("成功加入购物车");
    },
    // 初始化数据
    initData() {
      goodsInfo().then(res => {
        this.goods = res.data.data;
        this.goodsId = this.goods.goods_id;
        this.mallId = this.goods.mall_id;
        mallInfo(this.mallId).then(res => {
          this.mallInfo = res.data;
        });
      });

      goodsService().then(res => {
        this.goodsInfo = res.data.data;
      });

      mallList(this.goodsId).then(res => {
        this.mallList = res.data.list;
        this.mallRecList = res.data.mall_rec_list;
      });
    }
  },
  created() {
    this.goodsId = this.$route.params.id;
    this.initData();
  }
};
</script>

<style lang="less" scoped>
.goods-wrapper {
  margin-bottom: 50px;
  .showMore-wrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    .showMore {
      position: absolute;
      bottom: 0.63rem;
      left: 0.1rem;
      width: 1.21rem;
      height: 1.32rem;
      box-shadow: 0 0 0.08rem 0 rgba(0, 0, 0, 0.2);
      background-color: #fff;
      border-radius: 0.05rem;
      .more-item {
        height: 0.44rem;
        font-size: 0.14rem;
        color: #58595b;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #e9e9e9;
      }
    }
  }
  .goods-banner {
    position: relative;
    .banner-index {
      position: absolute;
      right: 0.1rem;
      bottom: 0.2rem;
    }
    img {
      height: 3.75rem;
      width: 3.75rem;
    }
  }
  .goods-info {
    background-color: white;
    .goods-price {
      padding: 0.11rem 0.12rem 0 0.1rem;
      display: flex;
      line-height: 0.31rem;
      justify-content: space-between;
      .price {
        position: relative;
        color: #ee2e3a;
        font-size: 0.28rem;
        i {
          font-size: 0.15rem;
        }
        .old-price {
          font-size: 0.13rem;
          color: #58595b;
          margin-left: 0.05rem;
          text-decoration: line-through;
        }
      }
      .info {
        font-size: 0.13rem;
        color: #58595b;
      }
    }
    .goods-name {
      padding: 0rem 0.12rem 0.01rem;
      span {
        position: relative;
        width: 100%;
        font-size: 0.15rem;
        line-height: 1.4;
        color: #151516;
        overflow: hidden;
        font-weight: 600;
        text-align: justify;
        word-break: break-all;
        word-wrap: break-word;
        letter-spacing: 1px;
      }
    }
    .service-promise {
      padding-left: 0.12rem;
      display: flex;
      justify-content: start;
      font-size: 0.13rem;
      line-height: 0.37rem;
      color: #58595b;
      height: 0.37rem;
      .service-item {
        margin-right: 0.15rem;
      }
    }
  }
}
.goods-mall-wrapper {
  margin-top: 0.08rem;
  background-color: white;
  .goods-mall {
    padding: 0.12rem 0.12rem 0.1rem 0.12rem;
    display: flex;
    position: relative;
    .mall-info {
      .name {
        line-height: 0.2rem;
        font-size: 0.15rem;
        color: #151516;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: left;
      }
      .info {
        span {
          margin-right: 0.12rem;
          font-size: 0.12rem;
          color: #9c9c9c;
        }
      }
    }
    .btn {
      position: absolute;
      right: 0.12rem;
    }
    img {
      width: 0.44rem;
      height: 0.44rem;
      margin-right: 0.08rem;
    }
  }
  .mall-rec-list {
    display: flex;
    padding: 0 0.12rem 0.13rem 0.13rem;
    .goods-item {
      margin-right: 0.14rem;
      width: 1.07rem;
      height: 1.5rem;
      .detail {
        .price {
          float: left;
          font-size: 0.14rem;
          color: #e02e24;
        }
        .info {
          float: right;
          font-size: 0.1rem;
          color: #9c9c9c;
        }
      }
      img {
        width: 1.07rem;
        height: 1.07rem;
        margin-bottom: 0.06rem;
      }
      .name {
        display: block;
        height: 0.17rem;
        margin-bottom: 0.04rem;
        overflow: hidden;
        font-size: 0.12rem;
        color: #151516;
        line-height: 0.17rem;
      }
    }
  }
}
.goods-detail {
  background-color: white;
  margin-top: 0.08rem;
  .title {
    padding: 0.11rem 0.12rem 0.07rem;
  }
  .goods-details-attr {
    margin: 0 0.12rem;
    background-color: #fafafa;
    padding: 0.12rem;
    padding-bottom: 0.09rem;
    border-radius: 0.03rem;
    font-size: 0.14rem;
    .attr-item {
      margin-bottom: 0.08rem;
      .attr-key {
        display: inline-block;
        width: 0.86rem;
        margin-right: 0.12rem;
        vertical-align: text-top;
        line-height: 0.18rem;
        color: #9c9c9c;
      }
      .attr-value {
        display: inline-block;
        color: #151516;
        width: 2.13rem;
        vertical-align: text-top;
        line-height: 0.18rem;
      }
    }
  }
  .goods-detail-desc {
    text-align: justify;
    word-wrap: break-word;
    font-size: 0.13rem;
    margin: 0.1rem 0.1rem 0.14rem;
    background-color: #fff;
    padding: 0;
    line-height: 0.2rem;
  }
}
.van-icon-arrow {
  position: absolute;
  right: 0.12rem;
  top: 50%;
  transform: translateY(-50%);
}
.van-goods-action {
  .normal-btn {
    display: flex;
    flex-direction: column;
    background-color: #f3aba7;
    color: #fff;
    justify-content: center;
    align-items: center;
    width: 100%;
    font-size: 0.15rem;
    span {
      line-height: 0.2rem;
    }
  }
  .group-btn {
    display: flex;
    flex-direction: column;
    background-color: #e02e24;
    color: #fff;
    justify-content: center;
    align-items: center;
    width: 100%;
    font-size: 0.15rem;
    span {
      line-height: 0.2rem;
    }
  }
}
</style>


